<%@page import="org.proddevplm.dao.data.Resource"%>
<%@page import="org.proddevplm.dao.data.activities.Activity"%>
<%@page import="java.util.List"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.tools.constants.ToolsConstants" %>
<%@page import="org.proddevplm.business.activity.constants.ActivityConstants" %>

<script>
	
	var uploadType = "fromExternalTool";
		
	$(function(){
		$( "button" ).button();
		$('#uploadFileDiv').hide();
		$("#externalToolContent").hide();
		$("#uploadDiv").button();
		$("#showTips").hide();
		
		$("#extToolsTable")
			.tablesorter({
				widthFixed:true,
				debug:false,
				widgets:['zebra'],
				headers:{
					0: {sorter: false},
					1: {sorter: false},
				}
			})
			.tablesorterPager({container: $("#extToolsPager")})
			
			.tablesorterFilter({filterContainer: "#extToolsFilter-box",
	     		filterClearContainer: "#extToolsFilter-clear-button",
	            filterCaseSensitive:false,
	            filterColumns: [2,3,4,5,6,7,8,9,10]
			});
	});
	
	function preUpload(){
		var fileName = document.getElementById('selectFile').value;
    	var activityName = document.getElementById('activitySelect').value;
    	var comments = document.getElementById('resDescription').value;

    	
    	var arguments = "uploadType="+uploadType+"&fileName="+fileName+"&activityName="+activityName+"&comments="+comments;
	   	ajaxCall("resourceManager", "1", arguments, submitForm);
       	
    }

    function submitForm() {
        document.forms["uploadExternalToolForm"].submit();
	}
    
    function preUploadApprover(activityName){
    	uploadType = "fromExternalToolApprover";
    	var fileName = document.getElementById('selectFile').value;
    	var comments = document.getElementById('resDescription').value;
    	
    	var arguments = "uploadType="+uploadType+"&fileName="+fileName+"&activityName="+activityName+"&comments="+comments;
    	ajaxCall("resourceManager", "1", arguments, submitForm);
    }
    
    function checkOut(fileName, row) {
        window.open("/proddev/uploadServlet?method=download&fileName="+fileName);
        var id = "col"+row;
        var content = "<img src=\"/proddev/images/checkIn.png\" onclick=\"$('#uploadFileDiv').show()\" align=\"middle\" width=\"20\" height=\"20\"/>"
        $('#'+id).html(content);
    }
    
    function finishActivity(name){
    	$("#activityName").val(name);
		document.forms["finishActivityForm"].submit();
    }
    
    $('#finishActivity').mouseover(function () {
    	$("#showTips").show();
	 });
    
    $('#finishActivity').mouseout(function () {
    	$("#showTips").hide();
	 });
    
    function approveActivity(name){
		$("#activityName").val(name);
		document.forms['approveForm'].submit();
	}
	
	function rejectActivity(name){
		$("#activityName").val(name);
		$("#rejectDialog").dialog("open");
	}
	
	$( "#rejectDialog" ).dialog({
		autoOpen: false,
		height: 350,
		width: 350,
		modal: true,
		buttons: {
			"Propose change": function() {
				var name = document.getElementById("activityName").value;
				var arguments = "activityName="+name+"&"+buildParameter("changeSubject")+"&"+buildParameter("changeDetails");
				ajaxCall("toolsManager", "21", arguments, forward);
				$( this ).dialog( "close" );
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});
	
	function forward(data){
		document.forms["rejectForm"].submit();
	}

</script>

<%
	List<Activity> activitiesForUser = (List)session.getAttribute("activitiesForUser");
	List<Resource> resByActName = (List)session.getAttribute("resByActName");
%>

<div class="pageTitle">
	<div style="text-align:left;">
		<a href="/proddev/controller?manager=dataAccessManager&method=21">
			<img src="/proddev/images/arrowleft.png" align="middle" height="20" width="30" style="border:0px"></a>
	</div>
	<p style="font-size:small; font-weight:bold; margin-top:-20px">External tool</p>

</div>

<%if(resByActName == null){ %>
<div style="margin:10 0 0;">
	<div style="float:left; text-align:left; font-weight:bold; color:#555555">
		Please choose the activity you want to complete
	</div>
	<select class="regInput" id="activitySelect" name="activitySelect" onchange="$('#externalToolContent').show()" size="1" style="width:25%; float:left; margin-left:10px">
		<option SELECTED>-select activity-</option>
		<%if(activitiesForUser!=null){
			for(int i=0; i<activitiesForUser.size(); i++) {
				Activity activity = (Activity)activitiesForUser.get(i);%>
				<option value="<%=activity.getName()%>"><%=activity.getName() %></option>
			<%}
		}
		%>		
	</select>
	<div style="clear:both"></div>
</div>

<div id="externalToolContent">
	<div style="width:50%; float:left">
		<div class="containerSmall" style="width:100%; margin-top:20px">
			<div style="width:100%; margin-top:10px; text-align:left;">
				<b>Add a description for the resource:</b>
			</div>
			<textarea class="regInput" id="resDescription" name="resDescription" rows="3" style="width:100%; margin-top:5px"></textarea>			
			
			<div id="uploadButtons" style="width:100%; margin-top:10px; float:left; text-align:left">
				<form action="/proddev/uploadServlet" method="post"
		                        enctype="multipart/form-data" name="uploadExternalToolForm">
		            <div id="fakeUpDiv" style="width:50%; position:relative; float:left">
		            	<input type="file" name="selectFile" id="selectFile" onchange="$('#coverUpload').val(this.value)" style="position:relative; -moz-opacity:0 ;	filter:alpha(opacity: 0); opacity: 0; z-index:2">
		                <input id="coverUpload" class="regInput" type="text" style="width:100%; height:30px; position:absolute;top:0px; left:0px; z-index:1;"/>
		            </div>        
		            <div id="uploadDiv" onclick="preUpload()" style="width:100px; margin-left:10px; font-weight: bold; float:left">Upload</div>
		            <div style="clear:both"></div>
		            
		        </form>
			</div>
			<div style="clear:both"></div>
		</div>
		<div style="width:101%; margin-top:10px">
			<button id="finishActivity" name="finishActivity" onclick="finishActivity($('#activitySelect').val())" style="width:40%; font-weight: bold; float:right">Finish activity</button>
			<div style="clear:both"></div>
		</div>
	</div>
	
	<form name="finishActivityForm" method="post" action="/proddev/controller" style="margin:0px">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.ACTIVITY_MANAGER%>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ActivityConstants.CHANGE_STATUS%>"/>
		<input id="activityName" name="activityName" type="hidden"/>
	</form>
	
	<div id="showTips" style="width:47%; margin-left:1%; float:left">
		<div style="width:45%;  margin-top:100px; margin-left:auto; margin-right:auto; background-color:#F0F0F6; padding: 0.5%; -moz-border-radius: 5px; -moz-box-shadow: 10px 10px 5px #888888; border: 1px solid #DBDBDB; color:#555555">
			Please press the <b><i>Finish Activity</i></b> button only after you have uploaded all relevant files for the activity
		</div>
	</div>
	<div style="clear:both"></div>
</div>
<%}else{%>
	<div align="center">
		<div id="externalTools" style="float:left; width:100%; margin-top:10px">
			<div style="width:100%; margin-top:10px; text-align:left; color:#555555">
				<b>Please download resource from the table below:</b>
			</div>
			
			<div style="float:right; margin-bottom:-10px; text-align:right; ">
				Search table: <input name="filter" id="extToolsFilter-box" value="" maxlength="30" size="30" type="text" style="background-color:#E6EEEE">
				<input id="extToolsFilter-clear-button" type="submit" value="Clear" style="background-color:#E6EEEE;"/>
			</div>
			<div style="clear:both;"></div>
			
			<table id="extToolsTable" class="tablesorter" style="width:100%" rules="rows" frame="hsides" bordercolor="#DBDBDB">
				<thead>
					<tr>
						<th style="text-align:center;">State</th>
						<th style="text-align:center;">Action</th>
						<th>Type</th>
						<th>File Name</th>
						<th>Version</th>
						<th>Status</th>
						<th>Author</th>
						<th>Modified by</th>
						<th>Created on</th>
						<th>Dev model stage</th>
						<th>Comments</th>
					</tr>
				</thead>
				<tbody>
					<%for(int i=0; i<resByActName.size(); i++) {
						Resource res = (Resource)resByActName.get(i);%>
						<tr id="row<%=i+1%>">
							<%if(res.isLocked()) {%>
								<td style="text-align:center; height:20px"><img src="/proddev/images/lockClosed.png" alt="locked" height="20" width="20"></td>
							<%}else{ %>
								<td style="text-align:center; height:20px"><img src="/proddev/images/lockOpen.png" alt="unlocked" height="20" width="20"></td>
							<%} %>
							<td id="col<%=i+1 %>" style="height:20px; text-align:center;">
								<%if(!res.isLocked()) {%>
	                                <img src="/proddev/images/checkOut.png" onclick="checkOut('<%=res.getName() %>','<%=i+1%>')" align="middle" width="20" height="20"/>
								<%}else{ %>
									<img src="/proddev/images/checkIn.png" onclick="$('#uploadFileDiv').show()" align="middle" width="20" height="20"/>
								<%} %>
							</td>
							<td style="height:20px; text-align:center"><%=res.getType() %></td>
							<td style="height:20px"><%=res.getName() %></td>
							<td style="height:20px"><%=res.getVersion() %></td>
							<td style="height:20px"><%=res.getStatus() %></td>
							<td style="height:20px"><%=res.getAuthor() %></td>
							<td style="height:20px"><%=res.getModifier() %></td>
							<td style="height:20px"><%=res.getDate() %></td>
							<td style="height:20px"><%=res.getDevPhase() %></td>
							<td style="height:20px"><%=res.getDetails() %></td>
						</tr>
					<%} %>
	
				</tbody>
			</table>
			<div id="extToolsPager" class="pager" style="float:right; margin-top:-10px">
				<form>
					<img src="/proddev/images/tablePager/first.png" class="first" width="20" height="20" />
					<img src="/proddev/images/tablePager/previous.png" class="prev" width="20" height="20" />
					<input type="text" class="pagedisplay" style="text-align:center; width:40px; height:20px; background-color:#E6EEEE"/>
					<img src="/proddev/images/tablePager/next.png" class="next" width="20" height="20" />
					<img src="/proddev/images/tablePager/last.png" class="last" width="20" height="20" />
					<select class="pagesize" style="height:20px;">
						<option SELECTED value="5">set paging</option>
						<option value="5">5 per page</option>
						<option value="10">10 per page</option>
						<option value="20">20 per page</option>
						<option value="30">30 per page</option>					
					</select>
				</form>
			</div>
			
			<%
			Resource res = resByActName.get(0); 
			String activityName = res.getActivityName();
			%>
			
			<div class="containerSmall" id="uploadFileDiv" style="width:50%; margin-top:10px; text-align:left; color:#555555; ">
				<div style="width:100%">
					<div style="margin-top:10px">
						<b>Please add remarks on the file:</b>
					</div>
					<textarea class="regInput" id="resDescription" name="resDescription" rows="2" style="width:100%; margin-top:5px"></textarea>	
				</div>
				
				<div id="uploadButtons" style="width:100%; margin-top:10px; float:left; text-align:left">
					<form action="/proddev/uploadServlet" method="post"
			                        enctype="multipart/form-data" name="uploadExternalToolForm">
			            <div id="fakeUpDiv" style="width:auto; position:relative; float:left">
			            	<input type="file" name="selectFile" id="selectFile" onchange="$('#coverUpload').val(this.value)" style="position:relative; -moz-opacity:0 ;	filter:alpha(opacity: 0); opacity: 0; z-index:2">
			                <input id="coverUpload" class="regInput" type="text" style="width:100%; height:30px; position:absolute;top:0px; left:0px; z-index:1;"/>
			            </div>        
			            <div id="uploadDiv" onclick="preUploadApprover('<%=activityName%>')" style="width:100px; margin-left:10px; font-weight: bold; float:left">Upload</div>
			            <div style="clear:both"></div>
			            
			        </form>
				</div>
				<div style="clear:both"></div>
			</div>
			<div style="clear:both"></div>
			<div style="width:100%; margin-top:10px">
				<button id="rejectActivity" name="rejectActivity" onclick="rejectActivity('<%=activityName%>')" style="width:150px; font-weight: bold; float:left">Reject activity</button>
				<button id="approveActivity" name="approveActivity" onclick="approveActivity('<%=activityName%>')" style="width:150px; font-weight: bold; float:right">Approve activity</button>
				<div style="clear:both"></div>
			</div>
				
			<div id="rejectDialog" title="Propose changes" style="display:none">
				<jsp:include page="/pages/content/project/devTools/workspace/changes/changeReport.jsp"></jsp:include>
			</div>
			
			<form name="rejectForm" method="post" action="/proddev/controller" style="margin:0px">
				<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.TOOLS_MANAGER%>"/>
				<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ToolsConstants.STAKEHOLDERS_FWD%>"/>
			</form>
				
			<form name="approveForm" method="post" action="/proddev/controller" style="margin:0px">
				<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.ACTIVITY_MANAGER%>"/>
				<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ActivityConstants.UPDATE_ACTIVITY%>"/>
				<input type="hidden" name="activityName" id="activityName">
			</form>
			<div style="clear:both"></div>
		</div>
	</div>
<%} %>